<template>
  <public-footer>
    <div class="top">
      <span class="left">订单列表</span>
      <span v-if="manage" class="rig" @click="det">管理</span
      ><span v-else class="rig_2" @click="complete">完成</span>
    </div>
    <div class="commlist">
      <ul>
        <li v-for="it in list_" :key="it.id">
          <van-checkbox
            v-model="it.checked"
            class="checke_s"
            checked-color="#ee0a24"
            v-on:click.native="checked_(it.id)"
          ></van-checkbox>
          <img :src="it.img || it.banner[0].path" alt="" />
          <div class="box">
            <span>{{ it.name }}</span>
            <div>
              <span> ￥{{ it.price }}</span>
              <div class="box1">
                <span class="min" @click="cut(it.id)">-</span>
                <span class="num">{{ it.count }}</span>
                <span class="max" @click="plus(it.id)">+</span>
              </div>
            </div>
            <span
              class="det_1"
              v-if="manage === false"
              @click="delete_ons(it.id)"
              >删除</span
            >
          </div>
        </li>
      </ul>
    </div>
    <div class="settlement">
      <div class="check_">
        <van-checkbox
          v-model="checked"
          checked-color="#ee0a24"
          v-on:click.native="cheAll"
          >全选</van-checkbox
        >
      </div>
      <div class="price_">
        总价:￥<span>{{ totalAmount }}</span>
      </div>
      <div class="sett">
        <van-button :disabled="manage === false"  v-on:click.native="sett" class="box_2" type="primary"
          >结算</van-button
        >
      </div>
      <van-dialog v-model="show" title="请扫描二维码付款" show-cancel-button class="dialog">
        <img src="../../images/2022-03-01.jpg" />
      </van-dialog>
    </div>
  </public-footer>
</template>
<script>
import { cartListApi, cartsaveApi } from "../../apis/cart";
import { Dialog } from "vant";
export default {
  data() {
    return {
      manage: true,
      list_: [],
      checked: false,
      priceAll: 0,
      show: false,
    };
  },
  created() {
    let cartList = cartListApi();
    cartList.then((data) => {
      this.list_ = data.data.product.reduce((s, it) => {
        s.push(it);
        return s;
      }, []);
      let c = this.list_.every((it) => {
        return it.checked === true;
      });
      if (c) {
        this.checked = true;
      } else {
        this.checked = false;
      }
    });
  },
  //监听总价
  computed: {
    totalAmount() {
      return this.list_.reduce((_t, _it) => {
        if (_it.checked) _t += _it.count * _it.price;
        return _t;
      }, 0);
    },
  },
  methods: {
    //管理完成切换
    det() {
      this.manage = !this.manage;
    },
    complete() {
      this.manage = !this.manage;
    },
    //商品删除
    delete_ons(id) {
      Dialog.confirm({
        title: "",
        message: "确认删除",
      })
        .then(() => {
          let del = this.list_.findIndex((item) => {
            return item.id === id;
          });
          this.list_.splice(del, 1);
          cartsaveApi({ product: this.list_ });
        })
        .catch(() => {
          // on cancel
        });
    },
    // 数量减
    cut(id) {
      let cut_ = this.list_.find((it) => {
        return it.id === id;
      });
      if (cut_.count > 1) {
        cut_.count -= 1;
        cartsaveApi({ product: this.list_ });
        // save.then(data=>{
        //  console.log(data);
        // })
      } else {
        this.$toast({
          message: `好兄弟,不能再减了`,
          position: "bottom",
        });
      }
    },
    //数量加
    plus(id) {
      let plus_ = this.list_.find((it) => {
        return it.id === id;
      });
      plus_.count += 1;
      cartsaveApi({ product: this.list_ });
    },
    //选中
    checked_(id) {
      let che_ = this.list_.find((it) => {
        return it.id === id;
      });
      che_.checked = !che_.checked;
      cartsaveApi({ product: this.list_ });
      let s = this.list_.every((it) => {
        return it.checked === true;
      });
      if (s) {
        this.checked = true;
      } else {
        this.checked = false;
      }
    },
    //全选
    cheAll() {
      this.list_.forEach((it) => {
        it.checked = !this.checked;
      });
      cartsaveApi({ product: this.list_ });
    },
    sett(){
      this.show=true
    }
  },
};
</script>

<style lang="less" scoped>
@import "../../style/reset.css";
.top {
  padding-top: 0.3rem;
  width: 100%;
  height: 2rem;
  display: flex;
  justify-content: space-between;
  border-bottom: 1px solid rgb(78, 77, 77);
  .left {
    margin-left: 1rem;
  }
  .color(@c) {
    margin-right: 1rem;
    color: rgb(255, 255, 255);
    background-color: @c;
    display: block;
    width: 3rem;
    height: 1.5rem;
    line-height: 1.5rem;
    text-align: center;
    border-radius: 5px;
  }
  .rig {
    .color(rgb(255, 136, 0));
  }
  .rig_2 {
    .color(rgb(255, 0, 0));
  }
}
.commlist {
  .det_1 {
    font-size: 0.9rem;
    color: red;
    float: right;
  }
  width: 100%;
  height: calc(100% - 5rem);
  overflow-x: hidden;
  ul > li {
    width: 100%;
    height: 5rem;
    display: flex;
    .checke_s {
      margin-left: 0.5rem;
      margin-right: 0.5rem;
    }
    img {
      width: 40%;
      height: 80%;
    }
    .box {
      margin-left: 0.5rem;
      .detle {
        float: right;
        font-size: 0.8rem;
      }
      > div {
        display: flex;
        padding-top: 0.5rem;
        > span {
          display: block;
          width: 3.5rem;
        }
        > .box1 {
          display: flex;
          height: 1.2rem;
          .min,
          .max {
            display: block;
            width: 1.2rem;
            height: 1.2rem;
            text-align: center;
            line-height: 1.2rem;
            font-size: 1rem;
            border: 1px solid rgb(167, 163, 163);
          }
          .num {
            width: 3rem;
            text-align: center;
            line-height: 1.2rem;
            border: 1px solid rgb(88, 88, 88);
          }
        }
      }
    }
  }
}
.settlement {
  width: 100%;
  height: 3rem;
  display: flex;
  justify-content: space-around;
  padding-top: 0.5rem;
  .check_ {
    margin-top: 0.5rem;
  }
  > .sett {
    .convert(@color) {
      display: block;
      margin-right: 1rem;
      width: 4rem;
      height: 2rem;
      border-radius: 5px;
      text-align: center;
      line-height: 2rem;
      background-color: @color;
      color: aliceblue;
    }

    .box_2 {
      .convert(rgb(255, 136, 0));
    }
  }
  > .price_ {
    font-size: 0.8rem;
    margin-left: 2rem;
    > span {
      color: red;
      font-size: 1.2rem;
    }
  }
  .dialog{
    img{
      // text-align: center;
      margin-left: 2.8rem;
      width: 10rem;
      height: 10rem;
    }
  }
}
</style>